<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-事件冒泡与阻止和默认事件</title>
</head>
<body>
<div id="box" @click="show2()">
    <button v-on:click="show1($event)">按钮1 </button>
    <button @click.stop="show1()">按钮2 </button>
    <!--在@click后面点上stop也是可以阻止冒泡事件-->
    <button @contextmenu="show3($event)">按钮3</button>
    <button @contextmenu.prevent="show4()">按钮</button>
</div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
    el:'#box',
    data:{},
    methods:{
        show1:function (ev) {
           alert('iloveu111');
           ev.cancelBubble=true;//设置cancelBubble=true;可以阻止事件冒泡
        },
        show2:function () {
            alert('iloveu222');
        },
        show3:function (ev) {
            alert('阻止默认事件成功');
            ev.preventDefault()//阻止默认事件
        },
        show4:function () {
            alert('阻止默认事件成功');
            //使用@contextmenu.prevent=show4()阻止默认事件
        },
    }
})
</script>